import ajax from '../../utils/ajax';

const dataList = document.getElementById('dataList');

const pageSelect = document.getElementById('pageSelect');

let per_page = 1;
let page = 1;
let search_str = '';
let pageTotal;

init();

function init() {
    //渲染初始数据
    showData();
}

function showData() {
    dataList.innerHTML = '';
    ajax('get', '/api/getNote', {
        search_str,
        page,
        per_page,
    }).then(({ data: { list, total, pageSize } }) => {
        per_page = pageSize;
        pageTotal = Math.ceil(total / pageSize);
        console.log(list, total, pageSize);
        //生成分页按钮
        createPageSelect();
        //生成分页按钮
        createPageSelect();
        // 渲染数据
        list.forEach(item => {
            const tr = document.createElement('tr');
            let td;

            td = document.createElement('td');
            td.innerText = item.id;
            tr.appendChild(td);

            td = document.createElement('td');
            td.innerText = item.title;
            tr.appendChild(td);

            td = document.createElement('td');
            td.innerText = item.updateTime.slice(0, 10);
            tr.appendChild(td);

            td = document.createElement('td');
            td.innerText = item.createTime.slice(0, 10);
            tr.appendChild(td);

            td = document.createElement('td');

            const modifyBtn = document.createElement('button');
            modifyBtn.innerText = '修改';
            modifyBtn.onclick = modifyBtn_click.bind(item.id);
            td.appendChild(modifyBtn);
            // console.log(modifyBtn);


            const deleteBtn = document.createElement('button');
            deleteBtn.innerText = '删除';
            deleteBtn.onclick = deleteBtn_click.bind(item.id);
            td.appendChild(deleteBtn);

            tr.appendChild(td);


            dataList.appendChild(tr);


        });
    })
}


function modifyBtn_click() {
    this;
}

function deleteBtn_click() {
    this;
}

//分页
function createPageSelect() {
    pageSelect.innerHTML = '';
    let btn;

    btn = document.createElement('button');
    btn.innerText = '首页';
    btn.onclick = function () {
        page = 1;
        showData();
    }
    pageSelect.appendChild(btn);

    // 上一页
    if (page > 1) {
        btn = document.createElement('button');
        btn.innerText = '上一页';
        btn.onclick = function () {
            page--;
            showData();
        }
        pageSelect.appendChild(btn);
    }

    // 创建按钮，给按钮加入页码，给按钮附加点击事件，插入pageSelect
    // 点击事件，改变page的值，调用showData()
    // 数字按钮

    let start = page - 3 < 1 ? 1 : page - 3;
    let end = page + 3 > pageTotal ? pageTotal : page + 3;
    if (start > 1) {
        const span = document.createElement('span');
        span.innerHTML = '...';
        pageSelect.appendChild(span);
    }

    for (let i = start; i < end; i++) {
        btn = document.createElement('button');
        btn.innerText = i;

        if (i == page) {
            btn.style.backgroundColor = 'tomato'
        }

        btn.onclick = function () {
            page = i;
            showData();
        }
        pageSelect.appendChild(btn);
    }

    if (end < pageTotal) {
        const span = document.createElement('span');
        span.innerText = '...';
        pageSelect.appendChild(span);
    }


    // 下一页
    if (page < pageTotal) {
        btn = document.createElement('button');
        btn.innerText = '下一页';
        btn.onclick = function () {
            page++;
            showData();
        }
        pageSelect.appendChild(btn);
    }

    btn = document.createElement('button');
    btn.innerText = '尾页';
    btn.onclick = function () {
        page = pageTotal;
        showData();
    }
    pageSelect.appendChild(btn);

}